<script>
import { getShowImage, isVip, showModal, showToast } from "../../../../utils"
import downArrowIcon from "../assets/down-arrow.png"
let videoContext
import popupPicker from "../../../../components/popupPicker/index.vue"
import persistence from "../../../../store/persistence"
export default {
  name: "analysisVideo",
  components: { popupPicker },
  data() {
    return {
      isVip: false,
      downArrowIcon,
      currentPlayRate: 1, //当前视频播放的倍速
    }
  },
  watch: {
    currentPlayRate(newVal) {
      !videoContext && this.init()
      videoContext.playbackRate(newVal)
      persistence.videoPlaySpeedRate.set(newVal)
    },
  },
  async created() {
    this.isVip = await isVip()
  },
  methods: {
    getShowImage,
    checkIsVip() {
      this.root.showVipTips()
    },
    onError(error) {
      showToast.default("视频加载失败，请稍后再试")
      console.log(error, "error")
    },
    init() {
      videoContext = uni.createVideoContext("analysis-video", this)
    },
  },
  mounted() {
    !videoContext && this.init()
    this.currentPlayRate = persistence.videoPlaySpeedRate.get() || 1
  },
  props: {
    videoFileUrl: {
      type: String,
      default: "",
    },
    height: {
      type: String,
      default: "",
    },
  },
  inject: ["root"],
}
</script>

<template>
  <!--		视频解析-->
  <view class="video-container">
    <template v-if="videoFileUrl">
      <video
        :src="getShowImage(videoFileUrl)"
        id="analysis-video"
        class="video"
        :style="height ? 'height: ' + height : ''"
        :custom-cache="false"
        @error="onError"
      ></video>
      <!--			蒙版，遮住视频，让非vip用户无法点击视频组件-->
      <view class="mask" @click.stop="checkIsVip" v-if="!isVip"></view>
      <view class="setting-btn-container">
        <view class="left"></view>
        <view class="right">
          <!--		设置视频倍速播放按钮-->
          <view class="playback-speed" @click="$refs.videoPlayRatePopup.open()">
            <text v-if="currentPlayRate === 1">倍速</text>
            <text v-else>当前倍速：{{ currentPlayRate }}</text>
            <image class="icon" :src="downArrowIcon"></image>
          </view>
        </view>
      </view>
      <!--		视频播放倍速设置弹框-->
      <popupPicker
        ref="videoPlayRatePopup"
        title="视频播放倍速"
        v-model="currentPlayRate"
        :picker-option-list="[
          { value: 0.5, label: '0.5' },
          { value: 0.8, label: '0.8' },
          { value: 1.0, label: '1.0' },
          { value: 1.25, label: '1.25' },
          { value: 1.5, label: '1.5' },
          { value: 2.0, label: '2.0' },
        ]"
      ></popupPicker>
    </template>
  </view>
</template>

<style scoped lang="scss">
.video-container {
  position: relative;
  .video {
    width: 100% !important;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
  }
  .setting-btn-container {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx;
    margin: 20rpx 0;
    .playback-speed {
      background: #1b9b69;
      height: 60rpx;
      border-radius: 30rpx;
      display: flex;
      align-items: center;
      padding: 0 30rpx;
      color: white;
      width: max-content;
      .icon {
        width: 30rpx;
        height: 30rpx;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
